﻿<template>
  <div class="app-container">
    <div class="filter-title">
      <el-form
        label-position="right"
        label-width="95px"
      >
        <el-form-item :label="$t('public.name')+' :'">
          <el-input
            v-model="listQuery.name"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.name')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.region')+' :'">
          <el-input
            v-model="listQuery.region_name"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.region')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.trade')+' :'">
          <el-input
            v-model="listQuery.trade"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.trade')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-button
          style="margin-left: 20px;"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >{{ $t('table.search') }}</el-button>
        <el-button
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          @click="handleRefresh"
        >{{ $t('table.refresh') }}</el-button>
        <div
          v-show="!showSearchItem"
          class="showDown"
          @click="showSearchItem = true"
        >
          <i class="el-icon-d-arrow-right"></i>
        </div>
        <div
          v-show="showSearchItem"
          class="showUp"
          @click="showSearchItem = false"
        >
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </el-form>
    </div>
    <div
      v-show="showSearchItem"
      class="filter-container"
    >
      <el-form
        label-position="right"
        label-width="95px"
      >
        <el-form-item :label="$t('business.startAdIncome')+' :'">
          <el-input
            v-model="listQuery.startAdIncome"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('business.startAdIncome')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('business.endAdIncome')+' :'">
          <el-input
            v-model="listQuery.endAdIncome"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('business.endAdIncome')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('business.startBalance')+' :'">
          <el-input
            v-model="listQuery.startBalance"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('business.startBalance')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('business.endBalance')+' :'">
          <el-input
            v-model="listQuery.endBalance"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('business.endBalance')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.registrationTime')+' :'">
          <div class="filter-item">
            <el-date-picker
              v-model="listQuery.startRegisterTime"
              :picker-options="pickerOptionsB"
              type="date"
              :placeholder="$t('public.startRegisterTime')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
          <div class="filter-item">
            <el-date-picker
              v-model="listQuery.endRegisterTime"
              :picker-options="pickerOptionsE"
              type="date"
              :placeholder="$t('public.endRegisterTime')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255,0.2)"
      border
      fit
      highlight-current-row
      style="width: 100%min-height:1000px"
    >
      <el-table-column
        fixed="left"
        align="center"
        :label="$t('table.id')"
        width="65"
      >
        <template slot-scope="scope">
          <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('merchant.id')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('public.name')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('public.trade')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.trade_name1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('rejection.industry')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.trade_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('public.region')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.region_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('public.address')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('public.linkman')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.linkman }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('public.mobile')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('public.registrationTime')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('public.status')"
      >
        <template slot-scope="scope">
          <span :class="statusColor(scope.row.status)">{{ merchantStatusEs(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('ad.income')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.ad_income }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('business.balance')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('weChat.bindingsNumber')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.wx.length }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        :label="$t('weChat.particular')"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="(typeof (scope.row.wx)==='object' && scope.row.wx.constructor===Array) && scope.row.wx.length > 0"
            type="primary"
            size="mini"
            @click="handleUntied(scope.row)"
          >{{ $t('weChat.untied') }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        :label="$t('table.actions')"
        :width="operWidth"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="loginType === 3"
            type="primary"
            size="mini"
            @click="handleRejection(scope.row)"
          >{{ $t('table.rejection') }}</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleRead(scope.row)"
          >{{ $t('table.read') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        :current-page="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <!-- 查看 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormRead"
    >
      <el-form
        :model="temp"
        label-position="right"
        label-width="40%"
        style="width: 400px margin-left:100px"
      >
        <el-form-item :label="$t('merchant.id')+' :'">
          <span>{{ temp.id }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.name')+' :'">
          <span>{{ temp.name }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.trade')+' :'">
          <span>{{ temp.trade_name1 }}</span>
        </el-form-item>
        <el-form-item :label="$t('rejection.industry')+' :'">
          <span>{{ temp.trade_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.region')+' :'">
          <span>{{ temp.region_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.address')+' :'">
          <span>{{ temp.address }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.linkman')+' :'">
          <span>{{ temp.linkman }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.mobile')+' :'">
          <span>{{ temp.mobile }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.registrationTime')+' :'">
          <span>{{ temp.created_at }}</span>
        </el-form-item>
        <el-form-item :label="$t('ad.income')+' :'">
          <span>{{ temp.ad_income }}</span>
        </el-form-item>
        <el-form-item :label="$t('business.balance')+' :'">
          <span>{{ temp.balance }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.status')+' :'">
          <span>{{ merchantStatusEs(temp.status) }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 拒播 -->
    <el-dialog
      title="拒播"
      :visible.sync="dialogFormRejection"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="40%"
        style="width: 400px margin-left:100px"
      >
        <el-form-item :label="$t('rejection.industry')+' :'">
          <multiple-selection
            :picked="reject_trade"
            placeholder="请选择拒播行业"
            key-field="id"
            show-field="name"
            :data="rejectTradeOptions"
            :count="rejectTradeCount"
            :page-size="pageSize"
            style="width:210px"
            multiple
            @getList="rejectTradeList"
            @values="rejectTradeid"
          ></multiple-selection>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormRejection = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          type="primary"
          :disabled="rejectionDisabled"
          @click="updateRejection"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-loading="untiedLoading"
      title="解绑"
      :visible.sync="untiedVisible"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255,0.2)"
    >
      <div style="text-align:center">
        <div
          v-for="(items, key, index) in wxShow"
          class="message"
        >
          <div class="avatar">
            <img :src="items.headimg" />
          </div>
          <div class="nickname">
            <span>{{ items.nickname }}</span>
          </div>
          <div class="close">
            <i
              class="el-icon-close"
              @click="addUntied(items, key)"
            ></i>
          </div>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="untiedVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          type="primary"
          @click="changgeUntied"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MultipleSelection from "@/views/select/MultipleSelection"; // 分页选择控件
import { getToken } from "@/utils/auth"; // get token from cookie

export default {
  name: "Merchant",
  components: {
    "multiple-selection": MultipleSelection
  },
  data() {
    return {
      loginType: undefined,
      showSearchItem: false,
      loading: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      statusOptions: [
        {
          value: 0,
          label: "经营中"
        },
        {
          value: 1,
          label: "注册中"
        },
        {
          value: 2,
          label: "审核不通过"
        },
        {
          value: 3,
          label: "停业"
        },
        {
          value: 4,
          label: "审核中"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        id: undefined,
        name: "",
        status: 0,
        startAdIncome: "",
        endAdIncome: "",
        startBalance: "",
        endBalance: "",
        trade: "",
        startRegisterTime: "",
        endRegisterTime: "",
        region_name: ""
      },
      temp: {
        id: undefined,
        name: "",
        region_name: "",
        address: "",
        linkman: "",
        mobile: "",
        created_at: "",
        ad_income: "",
        balance: "",
        reject_trade_ids: [],
        reject_trade_name: []
      },
      untiedVisible: false,
      wxShow: [],
      pid: "",
      untied: [],
      untiedLoading: false,
      rules: {},
      reject_trade: [],
      reject_id: "",
      dialogFormRead: false,
      dialogFormRejection: false,
      dialogStatus: "",
      textMap: {
        update: "更新",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      pickerOptionsB: {
        // 限制时间
        // selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'],
        // 限制日期
        disabledDate: this.disabledDateB
      },
      pickerOptionsE: {
        disabledDate: this.disabledDateE
      },
      rejectionDisabled: false,
      rejectTradeOptions: [],
      rejectTradeCount: 0,
      pageSize: 20
    };
  },
  computed: {
    operWidth: function() {
      let itemCount = 1;
      if (this.loginType === 3) {
        itemCount += 1;
      }
      return itemCount * 80 + "px";
    }
  },
  created() {
    this.loginType = JSON.parse(getToken()).type;
    this.getList();
  },
  methods: {
    handleUntied(row) {
      this.untied = [];
      this.wxShow = JSON.parse(JSON.stringify(row.wx)); // copy obj
      this.pid = row.id;
      this.untiedVisible = true;
    },
    addUntied(data, index, key) {
      this.wxShow.splice(index, 1);
      this.untied.push(data.openid);
    },
    changgeUntied() {
      if (this.untied.length > 0) {
        const adCancelPath = {
          company: "STQ",
          api: "pc_ad_cancel",
          version: "1.0",
          data: {
            id: this.pid,
            openid: this.untied.join(","),
            type: 2
          }
        };
        this.socketApi.sendSock(JSON.stringify(adCancelPath), res => {
          this.socketData(res);
        });
      } else {
        this.$message.error("请选择解绑账号！");
      }
    },
    rejectTradeList(pageNumber = 1, search = "") {
      this.getIndustry(pageNumber, search);
    },
    rejectTradeid(data) {
      this.reject_trade = data;
      if (this.reject_trade.length > 0) {
        this.reject_id = 1;
      } else {
        this.reject_id = "";
      }
    },
    disabledDateB(time) {
      if (this.listQuery.endRegisterTime) {
        return (
          time.getTime() >
          new Date(this.listQuery.endRegisterTime).getTime() +
          24 * 3600 * 1000 -
          8.64e7
        );
      }
    },
    disabledDateE(time) {
      if (this.listQuery.startRegisterTime) {
        return (
          time.getTime() <
          new Date(this.listQuery.startRegisterTime).getTime() - 8.64e6
        );
      }
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page
      };
      if (this.listQuery.id || this.listQuery.id === 0) {
        data["id"] = this.listQuery.id;
      }
      if (this.listQuery.name) {
        data["name"] = this.listQuery.name;
      }
      if (this.listQuery.status || this.listQuery.status === 0) {
        data["status"] = this.listQuery.status;
      }
      if (this.listQuery.startAdIncome || this.listQuery.startAdIncome === 0) {
        data["startAdIncome"] = this.listQuery.startAdIncome;
      }
      if (this.listQuery.endAdIncome || this.listQuery.endAdIncome === 0) {
        data["endAdIncome"] = this.listQuery.endAdIncome;
      }
      if (this.listQuery.startBalance || this.listQuery.startBalance === 0) {
        data["startBalance"] = this.listQuery.startBalance;
      }
      if (this.listQuery.endBalance || this.listQuery.endBalance === 0) {
        data["endBalance"] = this.listQuery.endBalance;
      }
      if (this.listQuery.startRegisterTime) {
        data["startRegisterTime"] = this.listQuery.startRegisterTime;
      }
      if (this.listQuery.region_name) {
        data["region_name"] = this.listQuery.region_name;
      }
      if (this.listQuery.endRegisterTime) {
        const date = new Date(this.listQuery.endRegisterTime);
        data["endRegisterTime"] = this.timestampToTime(
          date.getTime() + (60 * 60 * 24 * 1000 - 1)
        );
      }
      if (this.listQuery.trade) {
        data["trade_name"] = this.listQuery.trade;
      }
      const adMasterIndexPath = {
        // 获取商家档案列表
        company: "STQ",
        api: "pc_merchant_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(adMasterIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        id: undefined,
        name: "",
        status: 0,
        startAdIncome: "",
        endAdIncome: "",
        startBalance: "",
        endBalance: "",
        trade: "",
        startRegisterTime: "",
        endRegisterTime: ""
      };
      this.getList();
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormRead = true;
    },
    handleRejection(row) {
      // 打开拒播弹窗
      this.temp = Object.assign({}, row); // copy obj
      if (this.temp.reject_trade_ids) {
        let reject_trade = this.temp.reject_trade_ids;
        let trade_name = this.temp.trade_name;
        if (reject_trade && trade_name) {
          reject_trade = reject_trade.split(",");
          trade_name = trade_name.split(",");
        }
        const reject_item = [];
        for (let i = 0; i < reject_trade.length; i++) {
          reject_item.push({
            id: reject_trade[i],
            name: trade_name[i]
          });
        }
        this.reject_trade = reject_item;
      }
      this.dialogFormRejection = true;
    },
    updateRejection() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          let id = "";
          let name = "";

          if (this.reject_trade.length > 0) {
            const reject_trade_ids = [];
            const reject_trade_name = [];
            this.reject_trade.forEach(element => {
              reject_trade_ids.push(element.id);
              reject_trade_name.push(element.name);
            });
            id = reject_trade_ids.join(",");
            name = reject_trade_name.join(",");
          }

          const addRejectPath = {
            company: "STQ",
            api: "pc_merchant_addReject",
            version: "1.0",
            data: {
              reject_trade_ids: id,
              reject_trade_name: name
            }
          };

          this.socketApi.sendSock(JSON.stringify(addRejectPath), res => {
            if (res) {
              this.socketData(res);
            }
          });
        }
      });
    },
    // 行业模糊查找选择
    getIndustry(pageNumber, search) {
      const industryIndexPath = {
        company: "STQ",
        api: "pc_trade_index",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize,
          type: 2
        }
      };
      this.socketApi.sendSock(JSON.stringify(industryIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_merchant_index") {
            // 商家列表
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "pc_trade_index") {
            // 行业模糊查询
            this.rejectTradeOptions = resj.data;
            this.rejectTradeCount = resj.count;
          } else if (resj.api === "pc_merchant_addReject") {
            // 商家拒播行业
            this.dialogFormRejection = false;
            this.$message({
              type: "success",
              message: "拒播成功!"
            });
            this.getList();
          } else if (resj.api === "pc_ad_cancel") {
            this.$notify({
              title: "成功",
              message: "解绑成功",
              type: "success",
              duration: 2000
            });
            this.untiedVisible = false;
            this.getList();
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.message {
  display: table;
  margin: auto;
}
.message div {
  padding: 0 5px;
  display: table-cell;
  vertical-align: middle;
}
.message .nickname {
  min-width: 100px;
}
.message .avatar img {
  width: 80px;
  border-radius: 40px;
}
.message .close i {
  cursor: pointer;
}
</style>
